<template>
  <div class="view-equip-detail-wrap">
    <div class="view-equip-detail">
      <SubEditDropDown dropdownTitle="设备异常" class="equip-row-100">
        <template v-slot:content>
          <px-table :data="eqpData" class="equip-table" size="small" max-height="220" border>
            <px-table-column
              v-for="(item, index) in eqpTableColumns"
              :key="index"
              :label="item.label"
              :min-width="item.minWidth"
              :align="item.align"
              :show-overflow-tooltip="item.showOverflowTooltip"
              :fixed="item.fixed"
            >
              <template v-if="item.type === 'view'" #default="scope">
                <px-button
                  v-if="scope.row.missingPictureList && scope.row.missingPictureList?.length !== 0"
                  link
                  type="primary"
                  @click="handleView(scope.row)"
                >
                  查看
                </px-button>
                <span v-else>-</span>
              </template>
              <template v-else #default="scope">
                {{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}
              </template>
            </px-table-column>
          </px-table>
          <pagination
            v-show="eqpTotal > 0"
            v-model:page="eqpQueryParams.pageNum"
            v-model:limit="eqpQueryParams.pageSize"
            class="inspection-pagination"
            :total="eqpTotal"
            @pagination="queryEqpTable"
          />
        </template>
      </SubEditDropDown>
      <SubEditDropDown dropdownTitle="环境异常" class="equip-row-100">
        <template v-slot:content>
          <px-table :data="envData" class="equip-table" size="small" max-height="220" border>
            <px-table-column
              v-for="(item, index) in envTableColumns"
              :key="index"
              :label="item.label"
              :min-width="item.minWidth"
              :align="item.align"
              :show-overflow-tooltip="item.showOverflowTooltip"
              :fixed="item.fixed"
            >
              <template v-if="item.type === 'view'" #default="scope">
                <px-button
                  v-if="scope.row.missingPictureList && scope.row.missingPictureList?.length !== 0"
                  link
                  type="primary"
                  @click="handleView(scope.row)"
                >
                  查看
                </px-button>
                <span v-else>-</span>
              </template>
              <template v-else #default="scope">
                {{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}
              </template>
            </px-table-column>
          </px-table>
          <pagination
            v-show="envTotal > 0"
            v-model:page="envQueryParams.pageNum"
            v-model:limit="envQueryParams.pageSize"
            class="inspection-pagination"
            :total="envTotal"
            @pagination="queryEqpTable"
          />
        </template>
      </SubEditDropDown>
    </div>
    <!--图片预览弹窗-->
    <px-image-viewer
      v-if="isImageShow"
      :draggable="false"
      style="width: 100px; height: 100px"
      :zoom-rate="1.2"
      :url-list="imgList"
      hide-on-click-modal
      @close="handleClose"
    />
  </div>
</template>

<script lang="ts" setup>
import { queryDefect } from "@/api/defect";
import { computed, reactive, ref, toRefs, watchEffect } from "vue";
import SubEditDropDown from "../../components/SubEditDropDown.vue";

// 父级传过来的值
const props = defineProps(["taskDetailData", "activeName"]);

const eqpData = ref<any>([]);
const envData = ref([]);

const state = reactive<any>({
  eqpQueryParams: {
    pageNum: 1,
    pageSize: 20
  },
  eqpTotal: 0,
  envQueryParams: {
    pageNum: 1,
    pageSize: 20
  },
  envTotal: 0,
  isImageShow: false,
  imgList: []
});

const { eqpQueryParams, eqpTotal, envQueryParams, envTotal, isImageShow, imgList } = toRefs(state);

const eqpTableColumns = computed(() => [
  { prop: "missingId", label: "编号", minWidth: "220", showOverflowTooltip: true },
  { prop: "eqpId", label: "设备编号", minWidth: "240", showOverflowTooltip: true },
  { prop: "eqpName", label: "设备名称", minWidth: "200", showOverflowTooltip: true },
  { prop: "missingPictureList", label: "异常照片", minWidth: "240", type: "view", showOverflowTooltip: true },
  { prop: "missingDesc", label: "异常信息", minWidth: "400", showOverflowTooltip: true }
]);

const envTableColumns = computed(() => [
  { prop: "missingId", label: "编号", minWidth: "220", showOverflowTooltip: true },
  { prop: "missingPositionDescAll", label: "区域名称", minWidth: "240", showOverflowTooltip: true },
  { prop: "missingPictureList", label: "异常照片", minWidth: "200", type: "view", showOverflowTooltip: true },
  { prop: "missingDesc", label: "异常信息", minWidth: "400", showOverflowTooltip: true }
]);

const queryEqpTable = async () => {
  const res = await queryDefect({
    relationNumber: props.taskDetailData.taskCode,
    missingResource: "INSPECT",
    missingType: "EQP",
    ...eqpQueryParams.value
  });
  eqpTotal.value = res.total || 0;
  eqpData.value = res.data;
};

const queryEnvTable = async () => {
  const res = await queryDefect({
    relationNumber: props.taskDetailData.taskCode,
    missingResource: "INSPECT",
    missingType: "ENV",
    ...envQueryParams.value
  });
  envTotal.value = res.total || 0;
  envData.value = res.data;
};

watchEffect(async () => {
  if (props.activeName === "exception") {
    queryEqpTable();
    queryEnvTable();
  }
});

const handleClose = () => {
  isImageShow.value = false;
  imgList.value = [];
};

const handleView = row => {
  isImageShow.value = true;
  imgList.value = row.missingPictureList?.map(item => item.fileUrl);
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");

.view-equip-detail-wrap {
  .view-equip-detail {
    height: calc(100vh - 550px);
    // min-height: 100vh;
    padding: 0;
  }
}
</style>
